﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <script type="text/javascript" src="js/bootstrap.min.js"> </script>
        <script type="text/javascript" src="js/jquery-1.6.2.js"> </script>
        <script type="text/javascript" src="js/knockout-1.2.1.js"> </script>
</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand" href="#">Sooper Group</a>
                <ul class="nav">
                    <li class="active"><a href="#">Customer Managment</a></li>
                </ul>
            </div>
        </div>
    </div>
    <form class="offset3 form-horizontal">
    <fieldset>
        <legend>Create Customer</legend>
        <div class="control-group">
            <label class="control-label" for="input01">Title</label>
            <div class="controls">
                <input data-bind="value : title" type="text" class="input-xlarge" id="input01" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="input01">Name</label>
            <div class="controls">
                <input data-bind="value : name" type="text" class="input-xlarge" id="Text1" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="input01">Surname</label>
            <div class="controls">
                <input data-bind="value : surname" type="text" class="input-xlarge" id="Text2" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="input01">Email Address</label>
            <div class="controls">
                <input data-bind="value : emailAddress" type="text" class="input-xlarge" id="Text3" />&nbsp;&nbsp;&nbsp;
                <button data-bind="click : submit" class="btn btn-primary" style="vertical-align: top">
                    Submit</button>
            </div>
        </div>
        <div data-bind="visible : customerId() != null" class="control-group">
            Customer Created Succesfully, Customer Id : <span data-bind="text : customerId"></span>
        </div>
    </fieldset>
    </form>
    <script type="text/javascript">
        var viewModel = {
            title: ko.observable("Title"),
            name: ko.observable("Name"),
            surname: ko.observable("Surname"),
            emailAddress: ko.observable("user@domain.com"),
            customerId: ko.observable(null),

            submit: function() {

                var request = {
                    Title: this.title(),
                    Name: this.name(),
                    Surname: this.surname(),
                    EmailAddress: this.emailAddress()
                };

                var self = this;

                var ajaxOptions = {
                    url: "/ProfilingApp/CustomerHandler?Op=CreateCustomer",
                    type: "POST",
                    dataType: "JSON",
                    data: JSON.stringify(request),
                    complete: function(xmlHttpRequest, status) {
                        try {
                            var response = JSON.parse(xmlHttpRequest.responseText);
                            //alert(response.CustomerId);
                            self.customerId(response.CustomerId);
                        } catch(e) {
                            alert("an error occurred" + e.message);
                        }
                    },
                    contentType: "application/json; charset=\"utf-8\""
                    
                };

                $.ajax(ajaxOptions);
            }
        };

        ko.applyBindings(viewModel);
    </script>
</body>
</html>
